<template>
  <el-menu
      mode="horizontal"
      
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">用户管理</template>
      <router-link to="/newUser">

      <el-menu-item index="1-1">
          新建用户
        </el-menu-item>
      </router-link>

      <router-link to="/changeUser">

      <el-menu-item index="1-2">
          更改信息
        </el-menu-item>
      </router-link>
      <router-link to="/deletUser">

      <el-menu-item index="1-3">
          删除用户
        </el-menu-item>
      </router-link>
      <router-link to="/searchUser">

      <el-menu-item index="1-4">
          查询用户
        </el-menu-item>
      </router-link>


    </el-submenu>
    <el-submenu index="2">
      <template slot="title">博客管理</template>
      <router-link to="/writeBlog">
      <el-menu-item index="2-1">

        写博客

      </el-menu-item>
      </router-link>
      <router-link to="/deleteBlog">
        <el-menu-item index="2-2">删除博客</el-menu-item>
      </router-link>
      <router-link to="/updateBlog">
      <el-menu-item index="2-3">修改博客</el-menu-item>
      </router-link>
      <router-link to="/searchBlog">
        <el-menu-item index="2-4">查询博客</el-menu-item>
      </router-link>

    </el-submenu>
    <el-submenu index="3">
      <template slot="title">评论管理</template>
      <el-menu-item index="3-1">写评论</el-menu-item>
      <el-menu-item index="3-2">删除评论</el-menu-item>
      <el-menu-item index="3-3">修改评论</el-menu-item>
      <el-menu-item index="3-4">查询评论</el-menu-item>
    </el-submenu>
    
    <router-link to="/logout">
      <el-menu-item index="4" >登出</el-menu-item>
    </router-link>
    <router-link to="/">
      <el-menu-item index="5" >登陆</el-menu-item>
    </router-link>

  </el-menu>
</template>

<script>
export default {
  name: "MyHeader"
}
</script>

<style scoped>
.el-menu{
  display: flex;
  flex-shrink: 1;
  flex-wrap: nowrap;
}

</style>